<!-- PDF资源管理
<template>
  <div id="template">
    <page-main>
      <avue-crud v-model="Main_Form" :option="Main_Option" :data="Main_Data" :page.sync="Main_Page"
        :search.sync="Main_search" :table-loading="main_table_loading" ref="crud" @refresh-change="refreshChange"
        @search-change="searchChange" @reset-change="resetChange" @row-save="rowSave" @row-update="rowUpdate"
        @current-change="currentChangeMain"
        @size-change="sizeChangeMain"
        @row-del="rowDel">
        <template slot="url" slot-scope="{ row }">
          <span style="color: #2d7ad6; cursor: pointer;" @click="openPreview((row.url || ''))">{{ row.url || '' }}</span>
        </template>
        <template slot-scope="{ size, row, index}" slot="menu">
          <el-button :size="size" type="text" @click="editBtn(row, index)">编辑</el-button>
          <el-button :size="size" type="text" @click="rowDel(row)">删除</el-button>
        </template>
      </avue-crud>
    </page-main>

    <el-dialog title="PDF预览" :visible.sync="dialogVisible" width="60%">
      <div style="height: 400px;">
        <iframe :src="PDFPath" id="pdfContainer" width="100%" height="100%"
          frameborder="0" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Main_Option, Main_Data } from "./config";
import {
  queryResourceApi,
  createResourceApi,
  updateResourceApi,
  deleteResourceApi,
} from '@/api/resource/index';

export default {
  data () {
    return {
      Main_Option,
      Main_Data,
      main_table_loading: false,
      Main_Form: {},
      Main_search: {},
      Main_Page: {
        currentPage: 1,
        pageSize: 10,
        total: 1,
      },
      dialogVisible: false,
      PDFPath: '',
    };
  },
  mounted () {
    this.getHomePageInfoFunc();
  },
  methods: {
    // 
    currentChangeMain (val) {
      this.Main_Page.currentPage = val;
      this.getHomePageInfoFunc();
    },
    // 
    sizeChangeMain (val) {
      this.Main_Page.pageSize = val;
      this.getHomePageInfoFunc();
    },
    // 搜索事件
    async searchChange (params, done) {
      await this.getHomePageInfoFunc();
      done();
    },
    openPreview (url) {
      this.dialogVisible = true;
      this.$set(this, 'PDFPath', (process.env.VUE_APP_API_ROOT + url));
      // this.PDFPath = (process.env.VUE_APP_API_ROOT + url);
      console.log('this.PDFPath: ', this.PDFPath);
    },
    // 重置
    resetChange () {
      this.Main_search = {};
    },
    // 刷新
    refreshChange () {
      this.Main_Page.currentPage = 1;
      this.getHomePageInfoFunc();
    },
    editBtn (row, index) {
      const data = JSON.parse(JSON.stringify(row));
      data && data.url ? data['fileURL'] = [data.url] : '';
      this.$refs.crud.rowEdit(data, index);
    },

    rowSave (form, done, loading) {
      const { name, fileURL, remarks } = form;
      this.createResourceApiFunc({ name, classificate: 1, url: (fileURL && fileURL.length > 0 ? fileURL[0] : ''), remarks }, done, loading);
    },

    rowUpdate (row, index, done, loading) {
      const { id, name, fileURL, remarks } = row;
      this.updateResourceApiFunc({ id, name, url: (fileURL && fileURL.length > 0 ? fileURL[0] : ''), remarks }, done, loading);
    },

    rowDel (row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteResourceApiFunc({ id: row?.id ?? '' });
      }).catch(() => {
        this.$message.info('已取消');
      });
    },

    /**
     * @name requests
     * @author --h28
     */
    // 获取主页
    async getHomePageInfoFunc () {
      this.main_table_loading = true;
      const response = await queryResourceApi({
        ...this.Main_search,
        currentPage: this?.Main_Page?.currentPage ?? 1,
        pageSize: this?.Main_Page?.pageSize ?? 10,
        classificate: 1,
      }).catch(() => { });

      if (response?.code === 200) {
        this.Main_Data = response?.data?.records ?? [];
        this.Main_Page.total = response?.data?.total ?? 0;
      }
      this.main_table_loading = false;
    },
    // 新增
    async createResourceApiFunc (data, done, loading) {
      const response = await createResourceApi(data).catch(() => { });
      if (response?.code === 200) {
        this.$notify.success({ title: "提示", message: "新增成功", });
        this.Main_Page.currentPage = 1;
        this.getHomePageInfoFunc();
        done();
      }
      loading();
    },
    // 编辑
    async updateResourceApiFunc (data, done, loading) {
      const response = await updateResourceApi(data).catch(() => { });
      if (response?.code === 200) {
        this.$notify.success({ title: "提示", message: "编辑成功", });
        this.getHomePageInfoFunc();
        done();
      }
      loading();
    },
    // 删除
    async deleteResourceApiFunc (data) {
      const loadding = this.$loading({
        lock: true,
        text: "加载中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const response = await deleteResourceApi(data).catch(() => { });
      if (response?.code === 200) {
        this.$notify.success({ title: "提示", message: "删除成功", });
        this.Main_Page.currentPage = 1;
        this.getHomePageInfoFunc();
      }
      loadding.close();
    },
  },
};
</script>

  <style>

  </style> -->
